<template>
	<view class="pages">
		<Nav :type="type"></Nav>
		<view v-if="type == 4">
			<image src="/static/top.png" class="top1"></image>
			<view class="bottom">
				<view class="box pr" @click="goDetail(item.path)" v-for="(item,index) in sortedListDesc" :key="index">
					<div class="left">
						<div class="title">{{item.title}}</div>
						<div class="compay">{{item.compay}}</div>
						<div class="date">{{item.time}}</div>
					</div>
					<image :src="item.rightPic" class="rightPic">
					</image>
				</view>
			</view>
		</view>
		<image :src="url" mode="widthFix" style="width: 100%" v-else></image>
		<view v-if="!url" class="placeholder">
			敬请期待
		</view>
	</view>
</template>

<script>
	import Nav from '@/compontents/Nav.vue';
	export default {
		components: {
			Nav,
		},
		data() {
			return {
				type: '',
				url: '',
				list: [{
					title: '圆满落幕，项目亮点回顾！2025第三届中国整形外科创新转化大赛北部赛区',
					compay: '中关村医疗器械园有限公司',
					time: '08/04 18:47',
					rightPic: '/static/activity1.png',
					path: 'https://3g.k.sohu.com/t/n916025699?serialId=85f780beb880cf51ef6f98212848c10a&showType=&shp1=NzI5OTY2NTU2OTExNTU5MDcyNg%3D%3D__s1&sf_a=weixin'
				}, {
					title: '华东赛区，报名开启 | 2025第三届中国整形外科创新转化大赛火热进行中！',
					compay: '中关村医疗器械园有限公司',
					time: '08/18 18:00',
					rightPic: '/static/activity2.jpg',
					path: 'https://news.sina.com.cn/sx/2025-08-13/detail-infkvkve3302065.shtml'
				}, {
					title: '北部赛区报名通道开启！第三届中国整形外科创新转化大赛邀您报名~',
					compay: '中关村医疗器械园有限公司',
					time: '07/08 19:59',
					rightPic: '/static/activity3.png',
					path: 'https://mp.weixin.qq.com/s/bVF4uLNbGFZDnJMokCWUlA'
				}, {
					title: '12个项目入围决赛 | 2025第三届中国整形外科创新转化大赛北部赛区决赛公示！',
					compay: '中关村医疗器械园有限公司',
					time: '07/31 10:14',
					rightPic: '/static/activity4.png',
					path: 'https://mp.weixin.qq.com/s/6elqWe1KcLAzw14X1A6aMw'
				}, {
					title: '创新荟萃,圆满落幕！花都盛大举行2025第三届中国整形外科创新转化大赛华南赛区决赛',
					compay: '粤TV-珠江权威发布',
					time: '09/15 17:30',
					rightPic: '',
					path: 'https://m.itouchtv.cn/article/ee531ea006517169081933bf3cb7b0c3?shareId=I6udFeZD'
				}, {
					title: '第三届中国整形外科创新转化大赛华南赛区决赛在花都举行',
					compay: '广州日报新花城',
					time: '09/15 17:30',
					rightPic: '/static/activity40.png',
					path: 'https://huacheng.gz-cmc.com/pages/2025/09/08/SF14365820d03de882659148beaf4efe.html?channel=weixin'
				}, {
					title: '创新荟萃,圆满落幕！',
					compay: '网易新闻-新财经传奇',
					time: '09/15 17:30',
					rightPic: '/static/activity40.png',
					path: 'https://c.m.163.com/news/a/K8US0A3F055645XW.html?spss=newsapp&spsnuid=RfoXi0PlY%2Fu3zGSOe00DnKjzPq48wHEIl3F5CmjP7fRxCIMJorm%2FlouistUQe2FNLKLFB1b60t5bfMyo%2BfU9vA%3D%3D&spsdevid=CQk0YzZmZTg3Y2ZlOGFjZDRmCXVua25vd24%253D&spsvid=Mzg1ZDY2NmVjODVlYWRkYg%253D%253D&spsshare=wx&spsts=1757321145122&spstoken=3NN0Vd7sy2QE156jiapPBaI7WRRudMmThPRKvVVWkfBcPMWHmB3R0U5D6gu8Cr2GWVxyfjhyGxy97afZd%2FNJqg%3D%3D'
				}, {
					title: '创新荟萃,圆满落幕！',
					compay: '搜狐新闻-财经高峰会',
					time: '09/15 17:30',
					rightPic: '/static/activity40.png',
					path: 'https://www.sohu.com/a/932897877_570275'
				}, {
					title: '创新荟萃,圆满落幕！2025第三届中国整形外科创新转化大赛华南赛区',
					compay: '岭南网',
					time: '09/15 17:30',
					rightPic: '/static/activity40.png',
					path: 'https://www.lncnw.com/xiaofei/6346/2025/09/08/'
				}, {
					title: '创新荟萃,圆满落幕！2025第三届中国整形外科创新转化大赛华南赛区',
					compay: '中华网',
					time: '09/15 17:30',
					rightPic: '/static/activity40.png',
					path: 'https://mtz.china.com/touzi/2025/0908/188892.html'
				}, {
					title: '创新荟萃,圆满落幕！2025第三届中国整形外科创新转化大赛华南赛区',
					compay: '百度-新尧网财经',
					time: '09/15 17:30',
					rightPic: '/static/activity40.png',
					path: 'https://baijiahao.baidu.com/s?id=1842678767717263973&wfr=spider&for=pc'
				}, {
					title: '创新荟萃,圆满落幕！2025第三届中国整形外科创新转化大赛华南赛区',
					compay: '广东晨报',
					time: '09/15 17:30',
					rightPic: '/static/activity40.png',
					path: 'http://newspaper.gjzbao.com/wenyu/20250908/32712.html'
				}, {
					title: '2025第三届中国整形外科创新转化大赛华南赛区决赛举办',
					compay: '新浪广东',
					time: '09/15 17:30',
					rightPic: '/static/activity40.png',
					path: 'http://gd.sina.com.cn/finance/2025-09-08/cj-infptzmr4764110.shtml'
				}, {
					title: '创新荟萃,圆满落幕！2025第三届中国整形外科创新转化大赛华南赛区',
					compay: '今日头条-滚动财经',
					time: '09/15 17:30',
					rightPic: '/static/activity40.png',
					path: 'https://www.toutiao.com/article/7547554625218511360/?app=news_article&share_did=MS4wLjACAAAAAygbZ4lgtRbNkYxLHagisSjqTJqYjrdyxwOdDauAm5VxeJXb6IRFi17T5CvRY8oY&share_token=a4ebd384-8c6b-11f0-8f66-84160c1e4d7d&timestamp=1757305440&upstream_biz=client_share&category_new=mzhanhuiliu&share_uid=MS4wLjABAAAAbjui-juBpiolkrCO95l4lrIznH6D7guoAcopySxMUXk&tt_from=weixin&utm_source=weixin&utm_medium=toutiao_ios&utm_campaign=client_share&wxshare_count=1&source=m_redirect&wid=1757484784198'
				}, {
					title: '第三届中国整形外科创新转化大赛华南赛区决赛在穗举行',
					compay: '广州日报',
					time: '09/15 17:30',
					rightPic: '/static/activity40.png',
					path: 'https://gzdaily.dayoo.com/h5/html5/2025-09/09/content_869_895797.htm'
				}, {
					title: '创新荟萃,圆满落幕！2025第三届中国整形外科创新转化大赛华南赛区',
					compay: '大湾区新闻网',
					time: '09/15 17:30',
					rightPic: '/static/activity40.png',
					path: 'http://www.mszsqc.cn/2812.html'
				}, {
					title: '创新荟萃,圆满落幕！2025第三届中国整形外科创新转化大赛华南赛区',
					compay: '人民网',
					time: '09/15 17:30',
					rightPic: '/static/activity40.png',
					path: 'http://app.people.cn/h5/detail/normal/6480986105218048'
				}]
			};
		},
		onLoad(opt) {
			this.type = opt.type;
			// console.log('opt', opt);
			let type = opt.type;
			if (type == '1') {
				this.url = '/static/欢迎辞.jpg';
			}
			if (type == '2') {
				this.url = '/static/组织机构.jpg';
			}

			if (type == '5') {
				this.url = '/static/联系我们.jpg';
			}

			if (type == '6') {
				this.url = '/static/华东赛区.jpg';
			}

			if (type == '7') {
				this.url = '/static/北部赛区.jpg';
			}

			if (type == '8') {
				this.url = '/static/中部赛区.png';
			}
			if (type == '9') {
				// this.url = '/static/总结决赛.jpg';
			}
			if (type == '10') {
				this.url = '/static/华南赛区.jpg';
			}
			if (type == '11') {
				this.url = '/static/西部赛区.png';
			}
			if (type == '12') {
				this.url = '/static/赛事规则.jpg';
			}
		},
		computed: {
			// 按时间降序排序（从晚到早）
			sortedListDesc() {
				return [...this.list].sort((a, b) => {
					const dateA = new Date(`2025/${a.time}`);
					const dateB = new Date(`2025/${b.time}`);
					return dateB - dateA;
				});
			}
		},
		methods: {
			goDetail(path) {
				window.open(path, '_self')
			},
		},
	};
</script>

<style lang="scss" scoped>
	.pages {
		min-height: 100vh;
		width: 750rpx;
		background: #CBE7FF;
		position: relative;
	}

	.top1 {
		width: 750rpx;
		height: 426rpx;
	}

	.bottom {
		width: 750rpx;
		padding: 30rpx;
		box-sizing: border-box;
		flex-wrap: wrap;
		display: flex;
		flex-direction: column;
		gap: 20rpx;
	}

	.box {
		width: 690rpx;
		height: 206rpx;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		overflow: hidden;
	}

	.left {
		width: 450rpx;
		height: 100%;
		padding: 20rpx;
		box-sizing: border-box;
		position: relative;

		.title {
			font-size: 30rpx;
			// font-weight: 600;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			line-clamp: 2;
			-webkit-line-clamp: 2;
			overflow: hidden;
		}

		.compay {
			position: absolute;
			bottom: 20rpx;
			left: 20rpx;
			font-size: 20rpx;
			color: #999;
		}

		.date {
			position: absolute;
			bottom: 20rpx;
			right: 35rpx;
			font-size: 20rpx;
			color: #999;
		}
	}

	.rightPic {
		width: 218rpx;
		height: 150rpx;
		position: absolute;
		right: 24rpx;
		top: 30rpx;
		object-fit: cover;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
	}


	.placeholder {
		font-size: 16px;
		color: #666;
		text-align: center;
	}
</style>